<template>
    <div class="device-tabs-container">
        <!-- 设备类型Tab切换组件 -->
        <el-tabs
            v-model="activeTab"
            class="device-tabs"
            @tab-change="handleTabChange"
        >
            <el-tab-pane
                v-for= "tab in deviceTabs"
                :key="tab.name"
                :label="tab.label" 
                :name="tab.name"
            >
                <component :is="tab.component" @data-click="handleDataClick" />
            </el-tab-pane>
        </el-tabs>
        
        <!-- 右侧抽屉组件 -->
        <RightDrawer v-model:isShowDrawer="isShowDrawer"/>
    </div>
</template>


<script setup lang="ts">
import { ref } from 'vue';
import type { DeviceType } from "./types/index"
import DeviceContent from './components/DeviceContent.vue';
import VideoContent from './components/VideoContent.vue';
import RightDrawer from './components/RightDrawer.vue';
// 定义tab数量
const deviceTabs:DeviceType[] = [
    { 
        name: '1', 
        label: '水肥机', 
        component: DeviceContent 
    },
    { 
        name: '2', 
        label: '气象站', 
        component: DeviceContent 
    },
    { 
        name: '3', 
        label: '传感器', 
        component: DeviceContent 
    },
    { 
        name: '4', 
        label: '视频监控', 
        component: VideoContent 
    }
]
// tab切换
const activeTab = ref('1')
// 抽屉开关
const isShowDrawer = ref(false)
// tab切换
function handleTabChange(){}

// 处理数据按钮点击事件
function handleDataClick() {
  isShowDrawer.value = true
}
</script>

<style lang="scss" scoped>
// 去除el-tabs底部的灰色线
.device-tabs::v-deep .el-tabs__nav-wrap::after {
  display: none;
}
</style>